<template>
	<view>
		<view >
				<!-- <u-modal :show="show" :title="title" :closeOnClickOverlay="true" @confirm="confirm" :content='content'></u-modal> -->
				<u-popup :show="show" mode="center" @close="confirm" :round="10" :closeable="true">
					<view style="min-height:300rpx;padding:20rpx;width:400rpx;margin-top:40rpx;">
						<view style="text-align:center;height:30rpx;line-height:30rpx;">{{title}}</view>
						<view style="display:flex;align-items:center;justify-content:center;margin:20rpx;" v-if="msg_type==3">
							<image style="width:100rpx;height:100rpx;" src="../../static/imgs/Frame.png" mode="" />
						</view>
						<text>{{content}}</text>
					</view>
				</u-popup>

		</view>
	</view>
</template>

<script>
	export default {
		name:"websocket",
		components: {
			
		},
		data() {
			return {
				vedioUrl:'',
				ws:null,
				show:false,
				title:'通知',
				content:'',
				is_open_socket:false,
				timeout:55000,
				heartbeatInterval:null,
				msg_type:1
			};
		},
		onShow() {
			
		},
		methods:{
			confirm(){
				this.show = false
				this.$emit('reloadData','')
			},
			// init(){
			// 	//创建一个webSocket实例，执行后，客户端就会与服务端连接
			// 	var ws = new WebSocket(this.socketUrl); 
			// 	//当WebSocket创建成功时，触发onopen事件
			// 	ws.onopen = function(){
			// 		// console.log("open");
			// 	}
			// 	//当客户端收到服务端发来的消息时，触发onmessage事件
			// 	ws.onmessage = (e) => {
			// 		this.show = false
			// 		//e.data 的数据格式也是字符串，手动解析这些数据才能得到其他格式的数据。
			// 		const _data = JSON.parse(e.data);
			// 		// 在组件挂载后模拟点击
			// 		switch (_data.type) {
			// 			case 'notice':
			// 				this.show = true
			// 				this.content = _data.msg
			// 				break;
			// 			case 'init':
			// 				let userInfo = this.userInfo;
			// 				if(userInfo){
			// 					let bindData = {type:'bindUid',uid:userInfo.id,room:userInfo.media_id,client_id:_data.client_id};
			// 					ws.send(JSON.stringify(bindData))
			// 				}
			// 				break;
			// 			case 'bindUid':
							
			// 				// 绑定用户成功
			// 				// this.show = true
			// 				// this.content = _data.msg
			// 				break;
			// 			default:
			// 				this.show = true
			// 				this.content = _data.msg
			// 				break;
			// 		}
			// 		console.log(_data);
			// 	}
			// 	//当客户端收到服务端发送的关闭连接请求时，触发onclose事件
			// 	ws.onclose = function(e){
			// 		console.log("close");
			// 	}
			// 	//如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
			// 	ws.onerror = function(e){
			// 		console.log(error);
			// 	}
			// 	this.ws = ws;
			// },
			init(){
				//创建一个webSocket实例，执行后，客户端就会与服务端连接
				var ws = uni.connectSocket({url:this.socketUrl,complete:()=>{}}); 
				console.log({ws});
				//当WebSocket创建成功时，触发onopen事件
				ws.onOpen( () => {
					console.log('WebSocket连接已打开');
					this.start()
				})
				//当客户端收到服务端发来的消息时，触发onmessage事件
				ws.onMessage((e) => {
					console.log({e});
					this.show = false
					this.is_open_socket = true
					//e.data 的数据格式也是字符串，手动解析这些数据才能得到其他格式的数据。
					const _data = JSON.parse(e.data);
					// 在组件挂载后模拟点击
					switch (_data.type) {
						case 'notice':
							this.show = true
							this.content = _data.content
							this.title = _data.title
							this.msg_type = _data.msg_type
							break;
						case 'init':
							// 绑定用户成功
							let userInfo = this.userInfo;
							if(userInfo){
								let bindData = {type:'bindUid',uid:userInfo.id,room:userInfo.media_id,client_id:_data.client_id};
								ws.send({
									data:JSON.stringify(bindData),
									success() {
										console.log("消息发送成功");
									},
								})
							}
							break;
						case 'bindUid':
							break;
						default:
							this.show = true
							this.content = _data.content
							this.title = _data.title
							this.msg_type = _data.msg_type
							break;
					}
					console.log(_data);
				})
				//当客户端收到服务端发送的关闭连接请求时，触发onclose事件
				ws.onClose(function(e){
					console.log("WebSocket已关闭");
				})
				//如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
				ws.onError(function(e){
					console.log(e);
				})
				this.ws = ws;
			},
			close() {
				// this.ws.close();
				uni.closeSocket();
				this.is_open_socket = false;
				this.reconnect();
			},
			//重新连接
			reconnect(){
				//停止发送心跳
				clearInterval(this.heartbeatInterval)
				this.heartbeatInterval = null
				//如果不是人为关闭的话，进行重连
				if(!this.is_open_socket){
					this.reconnectTimeOut = setTimeout(()=>{
						this.init();
					},3000)
				}
			},
			//开启心跳检测
			start(){
				
				this.heartbeatInterval = setInterval(()=>{
					let data={value:"",type:"ping"}
					console.log(data)
					this.ws.send({
						data:JSON.stringify(data),
							success() {
								console.log("消息发送成功");
							},
						})
				},this.timeout)
			}
		},
		
	}
</script>

<style>

</style>
